<template>
  <div style="height: 100%" class="login-container">
    <div class="center-bg">
      <div class="bg1"></div>
      <div class="bg2"></div>
    </div>
    <div class="right d-flex flex-column ai-center jc-center">
      <div class="header d-flex jc-between ai-center">
        <span class="login-title">{{
          changePwdShow ? $t("edit_password") : $t("login.title")
        }}</span>
        <div class="d-flex ai-center">
          <lang-select class="lang-select" />
        </div>
      </div>
      <el-form v-if="!changePwdShow" class="form flex-1">
        <div class="line text">{{ $t("login.user_name") }}:</div>
        <el-input class="line" v-model.trim="form.user_name" />
        <div class="line text">{{ $t("login.password") }}:</div>
        <PasswordInput
          v-model="form.user_pwd"
          class="password-line line mb-20"
        />
        <div class="text line mb-30">
          <el-checkbox v-model="checked" size="medium">{{
            $t("login.readPsd")
          }}</el-checkbox>
          <div
            :class="checked ? 'checked' : ''"
            @click="checked = !checked"
          ></div>
        </div>
        <el-button
          class="line"
          :loading="loginLoading"
          @click.native="handleLogin"
          >{{ loginLabel }}</el-button
        >
      </el-form>
      <ModifyPwd
        v-else
        :defaultData="form"
        @updatePwdSuccess="updatePwdSuccess"
      />
    </div>
  </div>
</template>
<script>
import { login } from "@/views/login/service";
import LangSelect from "@/Layout/LangSelect";
import PasswordInput from "@/components/input/Password";
import ModifyPwd from "./ModifyPwd.vue";
export default {
  name: "Login",
  components: {
    LangSelect,
    PasswordInput,
    ModifyPwd,
  },
  data() {
    return {
      form: {
        user_name: "",
        user_pwd: "",
      },
      passwordType: "password",
      loginLoading: false,
      checked: false,
      changePwdShow: false,
    };
  },
  computed: {
    language() {
      return this.$store.state.language;
    },
    labelWidth() {
      return this.language == "zh-CN" ? "100px" : "150px";
    },
    loginLabel() {
      return this.loginLoading
        ? this.$t("login.isLogin")
        : this.$t("login.loginTxt");
    },
  },
  mounted() {
    this.form.user_name = localStorage.getItem("user_name");
    this.form.user_pwd = localStorage.getItem("user_pwd");
    this.checked = this.form.user_name && this.form.user_pwd ? true : false;
  },
  methods: {
    async handleLogin() {
      if (this.loginLoading) {
        return;
      }
      this.savePassword();
      if (!this.form.user_name) {
        this.$message.error(this.$t("login.usernameTip"));
        return;
      }
      if (!this.form.user_pwd) {
        this.$message.error(this.$t("login.passwordTip"));
        return;
      }
      this.loginLoading = true;
      const params = JSON.parse(JSON.stringify(this.form));
      try {
        const res = await login(params);
        this.$store.commit("SET_USERNAME", params.user_name);
        this.$store.commit("setToken", res.data);
        // 判断如果账号是admin,并且密码是弱密码,则强制修改名
        if (this.validateUserPass(params.user_pwd)) return;
        this.$router.push({
          path: "/",
        });
      } catch (error) {
        this.loginLoading = false;
      } finally{
        this.loginLoading = false;
      }
    },
    updatePwdSuccess() {
      this.changePwdShow = false;
      this.form = {
        user_name: "",
        user_pwd: "",
      };
    },
    validateUserPass(value) {
      if (
        value.length < 8 &&
        /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[\W_]).{8,}$/.test(value) === false
      ) {
        this.changePwdShow = true;
        return true;
      }
    },
    savePassword() {
      if (this.checked) {
        localStorage.setItem("user_name", this.form.user_name);
        localStorage.setItem("user_pwd", this.form.user_pwd);
      } else {
        localStorage.removeItem("user_name");
        localStorage.removeItem("user_pwd");
      }
    },
    showPwd() {
      this.passwordType = "";
    },
    hiddenPwd() {
      this.passwordType = "password";
    },
  },
};
</script>

<style lang="less" scoped>
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
@supports (-webkit-mask: none) and (not (cater-color: #fff)) {
  .login-container .el-input input {
    color: #fff;
  }
}

/* reset element-ui css */
.login-container {
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
  background: url("./assets/img/bg1.png") no-repeat center;
  background-size: 100%;
  .center-bg {
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0px 0px 30px 0px rgba(8, 84, 84, 1);
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 20px;
    position: relative;
    width: 1386px;
    height: 762px;
    margin: 153px 0 0 207px;
    .bg1 {
      position: absolute;
      top: 100px;
      left: 110px;
      width: 736px;
      height: 93px;
      background: url(./assets/img/bg3.png) 100% no-repeat;
    }
    .bg2 {
      position: absolute;
      width: 756px;
      height: 582px;
      left: 103px;
      top: 120px;
      background: url(./assets/img/bg2.png) 100% no-repeat;
      background-size: 100% 100%;
    }
  }
  .right {
    box-shadow: 0px 0px 30px 0px rgba(8, 84, 84, 1);
    background-color: rgba(60, 86, 113, 1);
    border-radius: 20px;
    height: 586px;
    width: 538px;
    position: absolute;
    right: 168px;
    top: 240px;
    padding: 45px;
    color: rgba(255, 255, 255, 1);
    .text {
      width: 76px;
      height: 19px;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 19px;
      font-family: MicrosoftYaHei-Regular;
      font-weight: NaN;
      text-align: left;
      white-space: nowrap;
      line-height: 19px;
      margin-left: 10px;
    }
    .header {
      width: 100%;
      .login-title {
        width: 157px;
        height: 50px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 50px;
        font-family: Exotic350BT-DemiBold-Regular;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        line-height: 50px;
      }
      .lang-select {
        cursor: pointer;
      }
    }
    .form {
      margin-top: 30px;
      width: 387px;
      display: flex;
      flex-direction: column;
      .line {
        margin-top: 20px;
        width: 387px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 24px;
        font-family: MicrosoftYaHei-Regular;
        font-weight: NaN;
        white-space: nowrap;
        line-height: 24px;
        position: relative;
        .checked {
          position: absolute;
          width: 27px;
          height: 25px;
          left: 0;
          top: 0;
          background: url("./assets/img/checked.png") no-repeat center;
          background-size: 100%;
          cursor: pointer;
        }
        /deep/ .el-checkbox__input.is-checked {
          visibility: hidden;
        }
        &.text {
          width: 387px;
          height: 24px;
        }
        &.password-line {
          position: relative;
          /deep/ .eye {
            cursor: pointer;
            position: absolute;
            right: 20px !important;
            top: 50%;
            transform: translateY(-50%);
            width: 29px;
            height: 16px;
            background: url(./assets/img/eye.png) 100% no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .el-input--middle {
        font-size: 24px;
      }
      /deep/ .el-input {
        background-color: rgba(242, 242, 242, 1);
        border-radius: 26px;
        width: 387px;
        height: 52px;
        input {
          background-color: rgba(242, 242, 242, 1);
          border-radius: 26px;
          width: 387px;
          height: 52px;
        }
      }
      /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #0aa29f;
        border-color: #0aa29f;
      }
      /deep/ .el-checkbox__inner {
        width: 27px;
        height: 25px;
      }
      /deep/ .el-checkbox__input.is-checked + .el-checkbox__label,
      /deep/ .el-checkbox__label {
        color: #fff;
        font-size: 25px;
        line-height: 25px;
      }
      /deep/ .el-checkbox__input {
        vertical-align: bottom;
      }
      /deep/ .el-checkbox__inner::after {
        height: 21px;
        left: 12px;
      }
      .el-button {
        background-color: rgba(10, 162, 159, 1);
        border-radius: 30px;
        height: 60px;
        width: 387px;
        border: none;
      }
    }
  }
}
</style>
